<template>
  <sys-page ref="page" :columns="columns" :model="model" :loader="loader" :label-width="null"
            :query-props="{showAddBtn: false}">
    <template v-slot:form>
        <el-form-item>
          <el-input v-model="model.key" placeholder="用户名／用户操作" clearable></el-input>
        </el-form-item>
    </template>
  </sys-page>
</template>

<script>
import {getSysLogList} from '$my/code/api/sys-log'

function getColumns() {
  return [
    {type: 'index', label: '序号', align: 'center'},
    {prop: 'id', label: 'ID', align: 'center', minWidth: 120, showOverflowTooltip: false, display: true},
    {prop: 'username', label: '用户名', align: 'center', minWidth: 180, showOverflowTooltip: true, display: true},
    {prop: 'operation', label: '用户操作', align: 'center', minWidth: 180, showOverflowTooltip: true, display: true},
    {prop: 'method', label: '请求方法', align: 'center', minWidth: 280, showOverflowTooltip: true, display: true},
    {prop: 'params', label: '请求参数', align: 'center', minWidth: 280, showOverflowTooltip: true, display: true},
    {prop: 'time', label: '执行时长(毫秒)', align: 'center', minWidth: 180, showOverflowTooltip: true, display: true},
    {prop: 'ip', label: 'IP地址', align: 'center', minWidth: 180, showOverflowTooltip: true, display: true},
    {prop: 'createDate', label: '创建时间', align: 'center', minWidth: 180, showOverflowTooltip: true, display: true}
  ]
}

export default {
  name: 'user',
  data() {
    return {
      model: {
        key: ''
      },
      columns: getColumns()
    }
  },
  methods: {
    async loader(model) {
      return getSysLogList(model)
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
}
</style>
